import dayjs from "dayjs";
const CommentList = (props) => {
  // 格式化时间 使用dayjs转换
  const formatTime = (time) => {
    // 返回 2021/10/10 10:10:10 这样的字符串
    return dayjs(time).format("YYYY/MM/DD HH:mm:ss");
  };

  // 使用一个新的数组进行排序，进行渲染
  const newList = [...props.comments];
  // 默认排序，ID大小
  if (props.active === "default") {
    newList.sort((p, c) => c.id - p.id);
  }
  // 时间排序，时间大小
  if (props.active === "time") {
    newList.sort((p, c) => c.time - p.time);
  }

  return (
    <ul className="comm-list">
      {newList.map((item) => (
        <li className="comm-item" key={item.id}>
          <div
            className="avatar"
            style={{ backgroundImage: `url(${item.avatar})` }}
          ></div>
          <div className="info">
            <p className={`name ${item.vip ? "vip" : ""}`}>
              {item.name}
              {item.vip && (
                <img
                  alt=""
                  src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png"
                />
              )}
            </p>
            <p className="time">
              <span>{formatTime(item.time)}</span>
              {/* 收藏 */}
              <span
                onClick={()=>props.collectComment(item.id)}
                className={`iconfont icon-collect${item.collect ? "-sel" : ""}`}
              ></span>
              {item.name === props.user.name ? (
                <span className="del" onClick={()=>props.delComment(item.id)}>删除</span>
              ) : null}
            </p>
            <p>{item.content}</p>
          </div>
        </li>
      ))}
    </ul>
  );
};

export default CommentList;
